<template>
    <div style="height: 100%">
        <AmisEditor
            id="editorName"
            theme="cxd"
            className="amis-editor"
            :preview="previewModel"
            :isMobile="mobileModel"
            :value="schema"
            :onChange="editorChanged"
        />
    </div>
</template>

<script setup>
defineOptions({
    name: '可视化编辑'
})

import { applyReactInVue } from 'veaury'

import { Editor } from 'amis-editor' // 引入编辑器

import { ref, reactive } from 'vue'
const AmisEditor = applyReactInVue(Editor) // 使用编辑器

const previewModel = ref(false) // 是否预览,实际开发中，如果需要编辑和预览，可以写一个change事件来改变这个值的状态
const mobileModel = ref(false) // 是否是手机模式

const schema = reactive({
    type: 'page',
    regions: ['body'],
    pullRefresh: {
        disabled: true
    }
}) // 渲染表单的内容

const editorChanged = (value) => {
    // 编辑器内容变化后触发的方法
    console.log('编辑器内容变化了。。。。')
    // todo  如果需要将数据保存，在这里可以操作
}
</script>

<style src="amis-editor-core/lib/style.css"></style>
<style src="amis-ui/lib/themes/cxd.css"></style>

<style scoped>
:deep(.amis-editor) {
    height: 100% !important;
    overflow-y: hidden;
}
:deep(.ae-Preview-body) {
    width: 96%;
}
</style>
